<template>
  <el-table
    highlight-current-row
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
  >
    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
    <el-table-column prop="name" type="index" label="序号" width="65"></el-table-column>
    <el-table-column prop="innerCode" label="设备编号" width="120"></el-table-column>
    <el-table-column prop="type.name" label="设备型号" width="120"></el-table-column>
    <el-table-column prop="node.name" label="详细地址" show-overflow-tooltip></el-table-column>
    <el-table-column prop="ownerName" label="合作商" show-overflow-tooltip></el-table-column>
    <el-table-column prop="vmStatus" label="运营状态" :formatter="formatterFn" show-overflow-tooltip></el-table-column>
    <el-table-column prop="status" label="设备状态">
      <!-- <slot name="statusbtn"></slot> -->
      <template #default="{row}">
        <div class="status" style="display:flex">
          <div
            class="item"
            :class="{active:!item}"
            v-for="(item,index) in row.status"
            :key="index"
          >{{displayname(index)}}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop label="操作" show-overflow-tooltip>
      <!-- <el-button type="text">货道</el-button> -->
      <!-- <el-button type="text">策略</el-button> -->
      <!-- <el-button type="text">修改</el-button> -->
      <template #default={row}>

      <el-button type="text" @click="openstatusdevicedetails(true,row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import vm from '@/Enums/vm'
export default {
  name: 'EmperorKedeStatysBodytable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data () {
    return {}
  },

  mounted () {
    this.thisvmStatus = vm.thisvmStatus
    // this.thisshebeistatus = vm.thisshebeistatus
    console.log(vm.thisshebeistatus)
  },

  methods: {
    formatterFn (row, column, cellValue, index) {
      //  console.log('cellValue'，cellValue) // 聘用形式
      // cellValue 0，1
      // You，1 second ago
      // [{id: 1，value:正式'}，[J]
      // 把拿到的数据进行遍历查找
      const info = this.thisvmStatus.find((item) => item.id === cellValue)
      // .find 返回的是 一个对象
      // 处理方法 判断 info 有没有数据  只有有数据 才渲染
      return (info && info.value) || '撤机'
    },
    // 遍历枚举数据
    displayname (index) {
      // console.log(index)//查看
      // 定义一个数据当做差值表达式的返回值
      const res = vm.thisshebeistatus.find((item) => item.id === index)
      // console.log(res)//查看
      return res.value
    },
    // 传递父组件打开弹出框
    openstatusdevicedetails (type, row) {
      this.$emit('openstatusdevicedetails', type, row)
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  background: #ffb43a !important;
}
.status {
  display: flex;
  .item {
    height: 23px;
    padding: 0 12px;
    background: #43ce98;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
    margin-right: 10px;
  }
}
</style>
